<template>
  <div
      style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: white; margin-top: -60px;">
    <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden;">
      <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
        <el-form :model="registerForm" style="width: 40%;" :rules="rules" ref="registerForm">
          <el-form-item prop="address">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入邮箱"
                      v-model="registerForm.address"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码"
                      v-model="registerForm.password"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码"
                      v-model="registerForm.confirmPass"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input prefix-icon="el-icon-mobile" size="medium" placeholder="请输入验证码"
                      v-model="registerForm.code"></el-input>
            <el-button @click="sendRegisterCode" size="medium" :disabled="disableSendCode">获取验证码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
          </el-form-item>
          <div style="display: flex">
            <div style="flex: 1">
              已有账号？请去<span style="color: #0f9876; cursor: pointer;" @click="$router.push('/UserloginView')">登录</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      registerForm: {
        address: '',
        password: '',
        confirmPass: '',
        code: ''
      },
      rules: {
        address: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        confirmPass: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      disableSendCode: false
    };
  },
  methods: {
    async sendRegisterCode() {
      try {
        // 检查账号是否存在
        const checkResponse = await axios.get("/api/user/login/findPwd", { params: { account: this.registerForm.address } });
        if (checkResponse.data.code === 200) {
          this.$message.error('账号已存在，请直接登录');
          return;
        }

        // 发送验证码
        this.$message.success('验证码发送中，请稍等');
        const response = await axios.get("/api/user/login/register/code", { params: { address: this.registerForm.address } });
        if (response.data.code === 200) {
          this.$message.success('验证码已发送到您的邮箱，请注意查收');
          this.disableSendCode = true;
        } else {
          this.$message.error('发送验证码失败，请稍后重试');
        }
      } catch (error) {
        this.$message.error('检查账号时出错，请稍后重试');
        console.error('检查账号时出错:', error);
      }
    },
    async register() {
      try {
        await this.$refs.registerForm.validate();
        const response = await axios.post("/api/user/login/register", this.registerForm);
        if (response.data.code === 200) {
          this.$message.success('注册成功');
          await this.$router.push('/UserloginView');
        } else {
          this.$message.error('注册失败，密码要求至少六位');
        }
      } catch (error) {
        this.$message.error('注册失败，请稍后重试');
        console.error('注册失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.margin-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader {
  display: inline-block;
  margin-top: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #999;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.edit-button {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
